import ListItem from "@material-ui/core/es/ListItem/ListItem";
import List from "@material-ui/core/List";
import {History} from "history";
import * as React from 'react';
import {DispatchProp} from "react-redux";
import {DepartInfo, Info, SearchBar} from "../../components/Components";
import {departExpandItem, departListFetch} from "../../store/actions";
import withRoot from "../../withRoot";
import CardHeader from "../mymedicalcard/CardHeader";

interface Doctor {
    id: string
}

interface Depart {
    id: string,
    detail: string,
    doctors: Doctor[]
}

interface DepartListProps extends DispatchProp {
    expands: string,
    list: Depart[],
    history: History
}

class DepartList extends React.Component<DepartListProps> {

    public handleClick = (id: string) => {
        this.props.history.push({
            pathname: "/doctor/list",
            state: {id}
        });
    };

    public sourceClick = (id: string) => {
        this.props.dispatch(departExpandItem(id));
    };

    public componentWillMount() {
        this.props.dispatch(departListFetch({}));
    };

    public searchClick = ( ref: any) => {
        const query = {
            name_like: "",
            extOrgCode: "1",
            tradeCode: "1012",
            clientType: "",
            hospitalId: "",
            extUserID: ""
        };
        this.props.dispatch(departListFetch({...query, name_like:ref.node.value}))
    };

    public render() {
        const {expands, list = []} = this.props;
        return (
            <List
                component="div"
                subheader={
                    <div>
                        <CardHeader
                            title={"科室列表"}
                            diplayButton={false}
                        />
                        <SearchBar searchClick={this.searchClick}/>
                    </div>
                }
            >
                {
                    list.map((each, index) => {
                        const {id, detail} = each;
                        return <ListItem key={id} button={true}>
                            <Info
                                sourceClick={this.sourceClick.bind(this, id)}
                                expands={id === expands}
                                data={each}
                                link={"[特色]"}
                                detail={
                                    <div>
                                        科室简介:<br/>
                                        &nbsp;&nbsp;&nbsp;&nbsp;{detail}
                                    </div>
                                }
                                showDivider={index !== list.length - 1}
                            >
                                <DepartInfo itemClick={this.handleClick.bind(this, id)} data={each}/>
                            </Info>
                        </ListItem>;
                    })
                }
            </List>
        );
    }
}

export default withRoot(DepartList);